Vertical spacing & line-height in design systems設計系統中的垂直間距與行高

設計系統主要包含三個基本部分：間距、顏色和字型。其中調整間距和顏色比較容易，但處理字型卻比較複雜。原因很簡單：不同字型在上下都有不同的空間，而且相同的字型在不同裝置上看起來也會不一樣。

Let's start with some history 從歷史說起

傳統印刷時代的排字工人會在金屬文字塊間加入鉛塊增加間距，這就是"leading（行距）"一詞的由來。現代軟體如CSS、Word和谷歌文件都用"行高"和"行距"表示這個概念。

相比傳統金屬塊需要適應字型最大高度的限制，數字排版讓設計師能更靈活地調整字母位置，甚至可以超出垂直間距的邊界。

So what's the big deal? 有什麼問題？

字型間最大的區別在於基線位置。雖然英文字型都有基線規則，但每個字型的字母和行高關係不一，缺乏統一標準。這使得在同一設計中使用多種字型時，視覺對齊變得困難且耗時。

Rendering text on different platforms 不同平臺的文字渲染

各個平臺顯示文字行高的方式都不一樣。比如說，1996年的網頁標準CSS1就定下了一個簡單的規則：每行文字在顯示時會在上下都留出相同的空白空間。

網頁和iOS裝置的文書處理方式很簡單：它們在每行文字的上下都留出相等的空白空間，這就形成了行高。Android裝置則採用不同的方式：它會減少段落首尾兩行的空白空間，並使用lineSpacingMultiplier設定來控制中間各行之間的間距。

iOS和Android顯示文字的方式不太一樣，這給設計工具帶來了困擾。

現在的網頁開發人員還無法獲取字型檔案的詳細資訊，比如字母高度、基線位置等。雖然iOS和Android應用能直接讀取字型檔案並調整間距，但很少這樣做。再加上不同裝置和瀏覽器顯示效果都略有不同，所以同一個設計在不同平臺上看起來都會有差異。

目前主流設計工具（如Sketch和Figma）都採用網頁和iOS的方式顯示文字，這樣能讓設計稿更容易交付給開發團隊。但這些工具還不能自動顯示文字的行高裁切範圍，需要手動調整。不過好在有個工具可以幫我們預覽不同平臺的文字顯示效果。

So what can we do about all this? 如何解決？

Manual spacing 手動調整間距

最簡單的解決方法是手動設定每個元件之間的空間，把每個文字區域都調整到精確的畫素大小。這種方法很直觀，但有幾個缺點：一是非常費時間；二是很容易調整出錯；三是不容易保持統一的風格。另外，如果需要更換字型，就得重新調整所有的間距。

Equally spaced font files 等寬字型檔案

用等間距字型是一個簡單有效的方法。這種字型在上下都有相同的空白空間，讓文字排版變得更簡單。當你使用這種字型時，文字會自動在行內居中，讓整個頁面看起來更規整。

想知道一個字型是不是等間距的很容易。在設計軟體裡開啟字型邊框顯示，把行高調到最小，然後看大寫字母是不是在邊框中間。如果是的話，這個字型就能和頁面上的其他內容很好地對齊。

選擇這種字型的兩大優勢：文字能與圖示和形狀垂直對齊，且上下間距保持一致。在元件中使用這種字型，可以確保文字與圖示完美對齊。無論字號如何變化，元素間距都能保持穩定，讓頁面的垂直節奏更和諧。

即將推出的CSS功能：leading-trim

網頁開發將推出新的leading-trim功能，讓開發者可以精確控制文字顯示範圍和邊界位置，從而確保頁面間距統一和文字基線對齊。

Be specific with calculations 計算精確的間距

我們可以用CSS變數來計算文字需要裁切的空間。無論字型大小如何變化，一種字型的大寫字母高度和基線位置佔整體高度的比例是固定的。只要知道這個比例，就能計算出需要在文字上下裁切多少空間。

調整文字的垂直節奏確實不容易，但只要花時間把細節處理好，就能建立一個可擴充套件的文字系統。按照本文介紹的方法和工具來做，你的產品和網站就能有很好的垂直節奏效果，使用者體驗也會更好。